<template>
    <el-menu :default-active="active">
        <template v-for="menu in data">
            <!-- 判断 当子菜单没有或者子菜单长度为0的时候，就显示不带子菜单的 -->
            <template v-if="!menu.children || menu.children.length === 0">
                <el-menu-item 
                    @click="to(menu.name)"
                    v-if="menu.meta.status" 
                    :index="menu.name" 
                    :key="menu.name"
                >
                    <i :class="menu.meta.menuicon"></i>
                    {{ menu.meta.menuname }}
                </el-menu-item>
            </template>
            <!-- 判断 当子菜单只有一个的时候，直接展示，就不展示父菜单-->
            <template v-else-if="menu.children.length===1">
                <el-menu-item 
                    @click="to(menu.children[0].name)"
                    v-if="menu.children[0].meta.status" 
                    :index="menu.children[0].name" 
                    :key="menu.children[0].name"
                >
                    <i :class="menu.children[0].meta.menuicon"></i>
                    {{ menu.children[0].meta.menuname }}
                </el-menu-item>
            </template>
            <!-- key 不能写在template上面 key 是用来阻止当前组件的复用-->
            <template v-else>
                <el-submenu v-if="menu.meta.status" :index="menu.name" :key="menu.name">
                    <template #title>
                        <div>
                            <i :class="menu.meta.menuicon"></i>
                            {{ menu.meta.menuname }}
                        </div>
                    </template>
                    <!-- 二次遍历 -->
                    <template v-for="submenu in menu.children">
                        <el-menu-item
                            @click="to(submenu.name)"
                            v-if="submenu.meta.status"
                            :index="submenu.name" 
                            :key="submenu.name"                            
                        >
                            <i :class="submenu.meta.menuicon"></i>
                            {{ submenu.meta.menuname }}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </template>
    </el-menu>
</template>
<script>
export default {
    props: {
        data: Array,
    },
    name: "TsMenus",
    computed:{
        // 根据当前的路由名称设置对应的菜单项高亮
        active(){
            return this.$route.name;
        }
    },
    methods: {
        // 消除多次点击同一个菜单项报错的问题，并且设置路由点击跳转
        async to(name) {
            try {
                await this.$router.push({
                    name,
                });
            } catch (error) {

            }

        },
    },
};
</script>